<!-- codeEditor.vue -->
<template>
  <codemirror
      class="codemirror-box"
      ref="codeEditor"
      v-model="editor"
      :options="cmoptions"
      @input="onInput"
  ></codemirror>
</template>
<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css' // 核心样式
import 'codemirror/theme/idea.css' // 主题样式 gruvbox-dark material panda-syntax seti nord shadowfox
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/yaml/yaml.js'
import 'codemirror/mode/nginx/nginx.js'
import 'codemirror/addon/selection/active-line.js' // 当前行背景高亮
import 'codemirror/addon/edit/matchbrackets.js' // 括号匹配
import 'codemirror/addon/edit/closebrackets.js' // 自动闭合括号
import 'codemirror/addon/edit/matchtags.js' // html标签匹配
import 'codemirror/addon/edit/closetag.js' // 自动闭合html标签
import 'codemirror/addon/scroll/simplescrollbars.js' // 滚动条
import 'codemirror/addon/scroll/simplescrollbars.css' // 滚动条

import 'codemirror/addon/fold/brace-fold.js' // javascript 代码折叠
import 'codemirror/addon/fold/indent-fold.js' // yaml代码折叠
// import 'codemirror/addon/fold/markdown-fold.js' // 代码折叠
// import 'codemirror/addon/fold/comment-fold.js' // 代码折叠
import 'codemirror/addon/fold/foldcode.js' // 代码折叠
import 'codemirror/addon/fold/foldgutter.js' // 代码折叠
import 'codemirror/addon/fold/foldgutter.css' // 代码折叠样式


export default {
  name: 'cmCodeEditor',
  components: {
    codemirror
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    readonly: {
      type: Boolean,
      default: false
    },
    fileName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: null,
      cmoptions: {
        tabSize: 4,
        mode: 'javascript',
        theme: 'idea',
        lineNumbers: true, // 显示行号
        readOnly: this.readonly, // 只读
        indentUnit: 4, // 缩进单位为4
        indentWithTabs: true, // 使用制表符进行缩进
        styleActiveLine: true, // 当前行背景高亮
        foldGutter: true, // 代码折叠
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], // 代码折叠
        lineWrapping: true, // 自动换行
        scrollbarStyle: 'simple' // 滚动条样式

      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.editor = val
      },
      immediate: true
    },
    fileName: {
      handler(val) {
        let fileType = val.split('.').pop()
        if (!fileType) {
          this.cmoptions.mode = 'javascript'
          return
        }
        switch (fileType) {
          case 'yaml':
            this.cmoptions.mode = 'yaml'
            break
          case 'conf':
            this.cmoptions.mode = 'nginx'
            break
          default:
            this.cmoptions.mode = 'javascript'
            break
        }
      },
      immediate: true
    }
  },
  methods: {
    onInput(val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style lang="less">

.codemirror-box {
  border: 1px solid rgb(107, 105, 105);

  .CodeMirror {
    background: #fff !important;
    height: 500px;
    width: 100%;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Source Code Pro', monospace;
  }
}

.CodeMirror-gutters {
  background: #f5f5f5 !important;
}

.CodeMirror-linenumber {
  color: #6c6c6c !important;
}

</style>

